{% extends "base.html" %}
{% load staticfiles %}
{% block title %}
    History
{% endblock %}
{% block content %}
    <div class="container">
        <h2>
            History
        </h2>
        {% if error %}<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert">&times;</a>{{ error }}</div>{% endif %}
        {% if success %}<div class="alert alert-success"><a href="#" class="close" data-dismiss="alert">&times;</a>{{ success }}</div>{% endif %}
        <hr>
        <div id="container"></div>
    </div>
{% endblock %}

{% block scripts %}
{#// jQuery#}
{#    <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>#}
{#// Highcharts#}
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script>
    $(function () {
    $('#container').highcharts({                   //图表展示容器，与div的id保持一致
        chart: {
            type: 'area'                         //指定图表的类型，默认是折线图（line）
        },
        title: {
            text: '{{ host.name }}:{{ item.name }}'      //指定图表标题
        },
        xAxis: {
            categories: [{% for c in clock %}{% if  forloop.last %}'{{ c }}'{% else %}'{{ c }}',{% endif %}{% endfor %}]   //指定x轴分组
        },
{#        yAxis: {#}
{#            title: {#}
{#                text: '{{ item.description }}'                  //指定y轴的标题#}
{#            }#}
{#        },#}
        tooltip: {
            shared: true
        },
        legend: {
            enabled: false
        },
        series: [{                                 //指定数据列
            name: '{{ item.key_ }}',                          //数据列名
            data: {{ value }}                        //数据
        }]
    });
});
    </script>
{% endblock %}